<template>
    <div class="enter">
        <div class="EContent">
            <!--选项卡-->
            <div class="ETabs" id="tabs">
                <ul>
                    <li @click="dianji()" ><span class="active">歌单</span></li>
                    <li @click="dianji()"><span>排行榜</span></li>
                    <li @click="dianji()"><span>歌手</span></li>
                    <div style="clear: both;"></div>
                </ul>
            </div>
            <!--歌单-->
            <div class="ESong song">
                <ul>
                    <li v-for="item in songList" :key="item.id" @click="sendSong(item.id)">
                        <img :src="item.imgUrl"/>
                        <div class="ESBack">
                            <img src="../assets/userwhite.png"/>
                            <span>{{item.authorName}}</span>
                        </div>
                        <p>{{item.title}}</p>
                    </li>
                    <div style="clear: both;"></div>
                </ul>
            </div>
            <!--排行榜-->
            <div class="ERankList song" >
                    <ul v-for="(item,index) in hotTop" :key="index" @click="sendParams(item.musicId)">
                        <li >{{index+1}}</li>
                        <li>{{item.musicName}}</li>
                        <li>{{item.singerName}}</li>
                        <div style="clear: both;"></div>
                    </ul>
            </div>
            <!--歌手-->
            <div class="ESinger song">
                <ul>
                    <li v-for="item in singList" :key="item.singerId" @click="sendSingers(item.singerId)">
                        <img :src="item.singerImg"/>
                        <div class="Einfo">
                            <span class="ETName">{{item.singerName}}</span>
                            <img  src="../assets/user.png"/>
                            <div style="clear: both;"></div>
                        </div>
                    </li>

                    <div style="clear: both;"></div>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Left from '@/components/Left.vue'
    export default {
        name: "Enter",
        components: {
            Left,
        },
        data(){
            return{
                songList:[],
                singList:[],
                hotTop:[],
            }
        },
        created(){
            this.getsong(),
            this.getsinger(),
            this.getHotTop()
        },

        methods:{
            // 选项卡点击
            dianji(){
                var oTab = document.getElementById('tabs');
                var aSpan = oTab.getElementsByTagName('span');
                var aSong =document.getElementsByClassName('song');
                for(var i=0;i<aSpan.length;i++){
                    aSpan[i].index=i;
                    aSpan[i].onclick=function () {
                        for(var j=0;j<aSpan.length;j++){
                            aSpan[j].className='';
                            aSong[j].style.display='none';
                        }
                            aSpan[this.index].className='active';
                            aSong[this.index].style.display='block';
                    }
                }
            },
            // 歌曲
            getsong() {
                this.$http({
                    url: this.$http.adornUrl('/special/selectList'),
                    method: 'post',

                }).then(({data}) => {
                    console.log("歌曲信息")
                    console.log(data);
                    this.songList = data.list
                })

            },
            // 歌手
            getsinger() {
                this.$http({
                    url: this.$http.adornUrl('/singer/selectTwenty'),
                    method: 'post',

                }).then(({data}) => {
                    console.log("歌手信息")
                    console.log(data);
                    this.singList = data.singerList
                })

            },
            //排行榜
            getHotTop() {
                this.$http({
                    url: this.$http.adornUrl('/music/hotTopMusic'),
                    method: 'post',

                }).then(({data}) => {
                    console.log("排行榜信息")
                    console.log(data);
                    this.hotTop = data.musicList
                })

            },
            //跳转到歌曲页面
            sendSong(id) {
                this.$router.push('/home/' + id);
            },
            //跳转到歌手页面
            sendSingers(singerId) {
                this.$router.push('/introductionsingers/' + singerId);
            },
            //跳转到音乐播放页
            sendParams(id) {
                this.$router.push('/singerplayer/' + id);
            },

        },
    }

</script>

<style scoped>
.enter{
    margin-top: 100px;
    width: 100%;
    background-color: black;
}
/*内容部分*/
.EContent{
    width: 50%;
    /*height: 870px;*/
    background-color:black;
    margin: 0 auto;
    border-left: 1px solid red;
    border-right: 1px solid red;
}
/*内容选项卡*/
.EContent .ETabs{
    border-bottom: 1px solid silver;
    height: 50px;

}
.EContent .ETabs .active{
    color: red;
}

.EContent .ETabs ul{
    height: 50px;
    line-height: 50px;
}
.EContent .ETabs ul li{
    float: left;
    width: 30%;
    list-style: none;

}
.EContent .ETabs ul li span:hover{
    color: red;
}
.EContent .ETabs ul li span{
    cursor: pointer;
    color: white;
}
/*歌曲*/
.ESong{
    height: 500px;
}
.ESong ul li{
    position: relative;
}
.ESong ul li p{
    margin: 0px 15px;
    color: white;
    text-align: left;
    overflow-y: hidden;
    height: 41px;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 15px;

}

.ESong .ESBack{
    height: 20px;

    width: 80%;
    background-color: #98848433;
    position: absolute;
    bottom: 46px;
    left: 18px;
    text-align: left;
    color: white;
}
.ESong .ESBack img{
    width: 14px;
    height: 14px;
    margin-right: 10px;


}

/*排行榜*/
.ERankList{
    /*height: 100px;*/
    display: none;
    margin-top: 10px;
}
.ERankList ul{
    padding: 10px;
}
.ERankList ul li{
    width: 30%;
    float: left;
    list-style: none;
    color: white;
    cursor: pointer;

}
/*歌手*/
.ESinger{
    width: 100%;
    display: none;
}
.ESinger ul,.ESong ul{
    margin-top: 10px;
    padding: initial;
}
.ESinger ul li , .ESong ul li{
    float: left;
    width: 20%;
    list-style: none;
    margin-bottom: 25px;


}
.ESinger ul li img , .ESong ul li img{
    width:150px;
    height:150px;
    /*如果使用此方法，兼容各大浏览器不变形，但图片不是完整显示的*/
    object-fit: cover;
}

.ESinger .Einfo{
    height: 15px;
}
.ESinger .ETName{
    float: left;
    margin-left: 20px;
    font-size: 15px;
    color: white;
}
.ESinger .Einfo img{
    width: 15px;
    height: 15px;
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}
</style>